<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			/*
				position与top、left、right、bottom是一起工作的
					top、left、right、bottom的属性值可以写负数。相反的效果
					position
						absolute：绝对定位，是从边框线开始
						relative：相对定位，是从自己本身的位置开始，会依然占领原来空间。要清除元素的默认位置
				z-index：控制z轴。默认值按代码从上到下的顺序增长
			*/
			#d1 {
				position: absolute;
				top: 300px;
			}
			#d2 {
				position: relative;
				top: 300px;
			}
			#d3 {
				position: relative;
				top: -120px;
				z-index: 999;
				border-radius: 50px;
				opacity: 0.5;
			}
			#d4 {
				position: fixed;
				right: 0px;
				top: 0px;
			}
		</style>
	</head>
	<body>
		你不看见我
		<div id="d1" style="background-color: red;width: 6.25rem;height: 6.25rem;">
			
		</div>
		<div id="d2" style="background-color: yellow;width: 6.25rem;height: 6.25rem;">
			
		</div>
		<div id="d3" style="background-color: blue;width: 6.25rem;height: 6.25rem;">
			
		</div>
		<div id="d4" style="background-color: beige;width: 6.25rem;height: 6.25rem;">
			<a href="#">固定</a>
			<a href="#d5">固定</a>
		</div>
		<div style="background-color: beige;width: 6.25rem;height: 6.25rem;">
			
		</div>
		<div style="background-color: beige;width: 6.25rem;height: 6.25rem;">
			
		</div>
		<div style="background-color: beige;width: 6.25rem;height: 6.25rem;">
			
		</div>
		<div style="background-color: beige;width: 6.25rem;height: 6.25rem;">
			
		</div>
		<div style="background-color: beige;width: 6.25rem;height: 6.25rem;">
			
		</div>
		<div style="background-color: beige;width: 6.25rem;height: 6.25rem;">
			
		</div>
		<div style="background-color: beige;width: 6.25rem;height: 6.25rem;">
			
		</div>
		<div style="background-color: beige;width: 6.25rem;height: 6.25rem;">
			
		</div>
		<div id="d5" style="background-color: beige;width: 6.25rem;height: 6.25rem;">
			
		</div>
	</body>
</html>
